<html>
<head>
	<title>Bootstrap TABS</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="bootstrap-dynamic-tabs/bootstrap-dynamic-tabs.css">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<button id="btnHtml" class="btn btn-info">Aba com HTML</button>
				<button id="btnAjax" class="btn btn-primary">Aba com AJAX</button>
				<button id="btnIon" class="btn btn-danger">Aba com ícone <i class="fa fa-user"></i></button>
			</div>
		</div>
		<div id="tabs">
		</div>
	</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap-dynamic-tabs/bootstrap-dynamic-tabs.js"></script>
<script type="text/javascript">


var tabs = $('#tabs').bootstrapDynamicTabs().addTab({
	title:'Home',
	text:'Plugin jQuery para manipular tabs do bootstrap de forma dinâmica, excelente para aplicações multitelas na WEB ou em runtimes como node-webkit ou electron.',
	closable: false
});
tabs.addTab({
		title: 'Carregando via Ajax',
		id: 'ajax1',
		ajaxUrl: 'ajax/file2.html',
		loadScripts: 'js/load.js',
		loadStyles: ['css/test.css','css/test2.css']
	});

$('#btnHtml').click(function(){
	tabs.addTab({
		title: 'Aba com HTML',
		html: '<h2>Desenvolvido por <a href="//jayralencar.com.br">Jayr Alencar</a></h2>'
	})
});

$('#btnAjax').click(function(){
	tabs.addTab({
		title: 'Carregando via Ajax',
		id: 'ajax',
		ajaxUrl: 'ajax/file.html',
		loadScripts: 'js/load.js',
		loadStyles: ['css/test.css','css/test2.css']
	});
});

$('#btnIon').click(function(){
	tabs.addTab({
		title: 'Aba com ícone',
		html: '<h2>Aba com ícone</h2>Um icone Font Awesome, exemplo: fa fa-user. O icone será mostrado na aba. Você também pode usar os glyphicon do Bootstrap </code>',
		icon: 'fa fa-user'
	})
})


</script>
</html>